<script setup lang="ts">
import type { DocMenuT } from '@/@types/type-doc-menu.ts';
import { ODivider, OIcon, OIconArrowRight, OIconArrowLeft } from '@opensig/opendesign';
import { computed } from 'vue';
import { useData } from 'vitepress';
import { MENU_KEYS } from '@/config/menu';
import { useMenuStore } from '@/stores/menu.ts';
import { storeToRefs } from 'pinia';

const menuStore = useMenuStore();
const { categoryMap } = storeToRefs(menuStore);

const { page } = useData();

const getPaths = (node: DocMenuT, prev: string = '') => {
  if (node.children?.length) {
    return node.children.map((child: DocMenuT) => getPaths(child, prev ? `${prev}/${node.id}` : node.id));
  } else {
    return {
      path: `${prev}/${node.id}`,
      label: node.label,
    };
  }
};

const categoryTree = computed(() => {
  return MENU_KEYS.map((key) => {
    const category = categoryMap.value[key];
    return {
      id: category.base,
      children: category.config,
    };
  });
});

const pathList = computed(() => {
  return categoryTree.value.map((node) => getPaths(node)).flat(5);
});

const config = computed(() => {
  const filePath = '/docs/' + page.value.filePath.slice(0, -3);
  const idx = pathList.value.findIndex((v) => v.path === filePath);
  const prev = pathList.value[idx - 1];
  const next = pathList.value[idx + 1];
  return {
    nextHref: next?.path,
    nextLabel: next?.label,
    prevHref: prev?.path,
    prevLabel: prev?.label,
  };
});
</script>

<template>
  <div class="doc-footer">
    <ODivider></ODivider>
    <div class="doc-footer-content">
      <div class="link-item" :class="[config.prevLabel && 'can-do']">
        <a
          v-analytics.addUrl="{ service: 'docs', properties: { type: 'link', target: '上一篇', detail: `${config.prevHref}.html` } }"
          :href="`${config.prevHref}.html`"
          v-if="config.prevHref && config.prevLabel"
        >
          <OIcon>
            <OIconArrowLeft />
          </OIcon>
          <div class="text-btn">
            <span class="link-text">上一篇</span>
            <span>{{ config.prevLabel }}</span>
          </div>
        </a>
      </div>
      <div class="link-item" :class="[config.nextLabel && 'can-do']">
        <a
          v-analytics.addUrl="{ service: 'docs', properties: { type: 'link', target: '下一篇', detail: `${config.nextHref}.html` } }"
          :href="`${config.nextHref}.html`"
          v-if="config.nextHref && config.nextLabel"
        >
          <div class="text-btn">
            <span>下一篇</span>
            <span class="link-text">{{ config.nextLabel }}</span>
          </div>
          <OIcon>
            <OIconArrowRight />
          </OIcon>
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.doc-footer {
  padding: 0 var(--padding-x);
  .o-divider {
    margin: 0;
  }

  .doc-footer-content {
    padding: 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .link-item {
      a {
        display: flex;
        align-items: center;
      }

      .o-icon {
        font-size: 24px;
      }

      .text-btn {
        display: flex;
        align-items: center;
      }

      .link-text {
        margin: 0 16px 0 10px;
      }

      a {
        color: var(--o-color-ubmc);
      }
    }
  }
}

@include respond-to('laptop') {
  .doc-footer {
    .doc-footer-content {
      padding: 28px 0;
      .link-text {
        margin: 0 16px 0 10px;
      }
    }
  }
}
@include respond-to('pad_h') {
  .doc-footer {
    .doc-footer-content {
      padding: 24px 0;
      .link-text {
        margin: 0 16px 0 10px;
      }
    }
  }
}
@include respond-to('pad_v') {
  .doc-footer {
    .doc-footer-content {
      padding: 20px 0;
      .link-text {
        margin: 0 16px 0 10px;
      }
    }
  }
}
@include respond-to('phone') {
  .doc-footer {
    .doc-footer-content {
      padding: 24px 0;
      gap: 12px;
      .link-item.can-do {
        padding: 16px 8px;
        background-color: var(--o-color-fill1);
        border-radius: 4px;
        width: calc(100% / 2 - 6px);
        .text-btn {
          flex-wrap: wrap;
          margin-left: 10px;
          flex-direction: column;
          align-items: flex-end;
          width: calc(100% - 34px);
          span {
            min-width: 0;
            flex-shrink: 1;
            flex-grow: 1;
            margin-bottom: 4px;
            @include text-truncate(1);
            &:first-child {
              @include tip1;
            }
          }
        }
        .link-text {
          margin: 0;
        }
        &:last-child {
          .text-btn {
            margin-left: 0;
            margin-right: 10px;
            align-items: flex-start;
          }
        }
      }
    }
  }
}
</style>
